<template>
  <div class="project-purchase-fllow">
    <van-form ref="form" @submit="formSubmited">
      <van-field
        name="tenderDocument"
        label="招标文件"
        required
        :rules="[{ required: true, message:'请选择' }]"
      >
        <template #input>
          <van-radio-group
            :disabled="submitDisabled || !canEdit"
            v-model="form.tenderDocument"
            direction="horizontal"
          >
            <van-radio name="0">未收到</van-radio>
            <van-radio name="1">已收到</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        readonly
        clickable
        name="tenderDocumentDate"
        :value="form.tenderDocumentDate"
        label="招标时间"
        placeholder="点击选择日期"
        @click="openCalendar('tenderDocumentDate')"
      />
      <van-calendar
        ref="calendar"
        v-model="calenderVisible"
        :default-date="defaultDate"
        @confirm="dateConfirm"
      />

      <van-field
        class="fieldAddMargin"
        name="firstPartyInspect"
        label="甲方验厂"
        required
        :rules="[{ required: true, message:'请选择' }]"
      >
        <template #input>
          <van-radio-group
            v-model="form.firstPartyInspect"
            :disabled="submitDisabled || !canEdit"
            direction="horizontal"
          >
            <van-radio name="0">未完成</van-radio>
            <van-radio name="1">已完成</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        readonly
        clickable
        name="firstPartyInspectDate"
        :value="form.firstPartyInspectDate"
        label="完成日期"
        placeholder="点击选择日期"
        @click="openCalendar('firstPartyInspectDate')"
      />

      <van-field
        class="fieldAddMargin"
        name="technicalTender"
        label="技术投标"
        required
        :rules="[{ required: true, message:'请选择' }]"
      >
        <template #input>
          <van-radio-group
            v-model="form.technicalTender"
            direction="horizontal"
            :disabled="submitDisabled || !canEdit"
          >
            <van-radio name="0">未完成</van-radio>
            <van-radio name="1">已完成</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        readonly
        clickable
        name="technicalTenderDate"
        :value="form.technicalTenderDate"
        label="完成日期"
        placeholder="点击选择日期"
        @click="openCalendar('technicalTenderDate')"
      />

      <van-field
        class="fieldAddMargin"
        name="businessTender"
        label="商务投标"
        required
        :rules="[{ required: true, message:'请选择' }]"
      >
        <template #input>
          <van-radio-group
            v-model="form.businessTender"
            direction="horizontal"
            :disabled="submitDisabled || !canEdit"
          >
            <van-radio name="0">未完成</van-radio>
            <van-radio name="1">已完成</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        readonly
        clickable
        name="businessTenderDate"
        :value="form.businessTenderDate"
        label="完成日期"
        placeholder="点击选择日期"
        @click="openCalendar('businessTenderDate')"
      />

      <van-field class="fieldAddMargin" name="winBidCase" label="是否中标">
        <template #input>
          <van-radio-group
            v-model="form.winBidCase"
            direction="horizontal"
            :disabled="submitDisabled || !canEdit"
          >
            <van-radio name="1">中标</van-radio>
            <van-radio name="2">丢标</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        readonly
        clickable
        name="winBidDate"
        :value="form.winBidDate"
        label="中标/丢标时间"
        placeholder="点击选择日期"
        :required="form.winBidCase ? true : false"
        @click="openDatetimePicker"
      />
      <van-popup v-model="winBidDateShow" position="bottom">
        <van-datetime-picker
          v-model="curWinBidDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="datetimePcikerConfirm"
        />
      </van-popup>

      <van-field
        v-model="form.loseBidReason"
        label="丢标原因"
        v-show="form.winBidCase == '2'"
        type="textarea"
        :required="form.winBidCase == '2'"
        :disabled="submitDisabled || !canEdit"
        :rules="[{ validator: loseBidReasonValidator, message:'请输入丢标原因' }]"
      />
    </van-form>
    <div style="margin: .3rem;" v-if="recordCanEdit">
      <van-row type="flex">
        <van-col class="bottomBtnCol">
          <van-button
            round
            block
            type="default"
            native-type="button"
            :disabled="submitDisabled"
            @click="canEditBtnClick"
          >{{ canEdit?'取消':'编辑' }}</van-button>
        </van-col>
        <van-col class="bottomBtnCol">
          <van-button
            round
            block
            type="info"
            native-type="button"
            :disabled="submitDisabled || !canEdit"
            @click="okBtnClick"
          >确定</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import {
  Form,
  Field,
  Radio,
  RadioGroup,
  Calendar,
  Button,
  Toast,
  DatetimePicker,
  Popup,
  Row,
  Col
} from "vant";
import { formatDate } from "@/utils";
export default {
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [Calendar.name]: Calendar,
    [Button.name]: Button,
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup,
    [Row.name]: Row,
    [Col.name]: Col
  },
  data() {
    return {
      detail: {},
      form: {
        tenderDocument: "",
        tenderDocumentDate: "",
        firstPartyInspect: "",
        firstPartyInspectDate: "",
        technicalTender: "",
        technicalTenderDate: "",
        businessTender: "",
        businessTenderDate: "",
        winBidCase: "",
        winBidDate: "",
        loseBidReason: ""
      },
      calenderVisible: false,
      curKeyName: "",
      defaultDate: new Date(),
      submitDisabled: false,
      winBidDateShow: false,
      curWinBidDate: new Date(),
      minDate: new Date(),
      maxDate: new Date(2100, 1, 1),
      canEdit: false,
      resData: undefined,
      recordCanEdit: true // 作废或者审批拒绝则不能编辑
    };
  },
  mounted() {
    let detail = this.$store.state.projectPurchase.projectPurchaseDetail;
    this.detail = detail;
    if (detail.delFlag || detail.approveStatus == 0) {
      this.recordCanEdit = false;
    }
    this.initData();
  },
  methods: {
    ...mapActions({
      getFollowInfo: "projectPurchase/getFollowInfo",
      updateFllowInfo: "projectPurchase/updateFllowInfo"
    }),
    initData() {
      this.getFollowInfo({ id: this.detail.id })
        .then(res => {
          console.log(res);
          if (res.data) {
            this.resData = res.data;
            if (res.data.winBidCase == 1 || res.data.winBidCase == 2) {
              this.submitDisabled = true;
            }
            for (const key in res.data) {
              if (res.data.hasOwnProperty(key)) {
                let element = res.data[key];
                if (key.includes("Date") && element) {
                  element = formatDate(new Date(element), "yyyy-MM-dd");
                }
                this.form[key] = "" + element;
              }
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    openCalendar(key) {
      this.curKeyName = key;
      if (!this.submitDisabled && this.canEdit) {
        if (this.form[key]) {
          this.defaultDate = new Date(this.form[key]);
          this.$refs.calendar.reset();
        }
        this.calenderVisible = true;
      }
    },
    dateConfirm(date) {
      let value = formatDate(date, "yyyy-MM-dd");
      if (this.curKeyName) {
        this.form[this.curKeyName] = value;
      }
      this.calenderVisible = false;
    },
    loseBidReasonValidator(val) {
      return this.form.winBidCase == "2" ? (val ? true : false) : true;
    },
    openDatetimePicker() {
      if (!this.submitDisabled && this.canEdit) {
        if (this.form.winBidDate) {
          this.curWinBidDate = new Date(this.form.winBidDate);
        }
        this.winBidDateShow = true;
      }
    },
    datetimePcikerConfirm(val) {
      if (val) {
        console.log(val);
        this.form.winBidDate = formatDate(val, "yyyy-MM-dd");
        this.winBidDateShow = false;
      }
    },
    canEditBtnClick() {
      if (this.canEdit) {
        // 取消 还原数据
        this.form = {
          tenderDocument: "",
          tenderDocumentDate: "",
          firstPartyInspect: "",
          firstPartyInspectDate: "",
          technicalTender: "",
          technicalTenderDate: "",
          businessTender: "",
          businessTenderDate: "",
          winBidCase: "",
          winBidDate: "",
          loseBidReason: ""
        };
        for (const key in this.resData) {
          if (this.resData.hasOwnProperty(key)) {
            let element = this.resData[key];
            if (key.includes("Date") && element) {
              element = formatDate(new Date(element), "yyyy-MM-dd");
            }
            this.form[key] = "" + element;
          }
        }
      }
      this.canEdit = !this.canEdit;
    },
    okBtnClick() {
      this.$refs.form.submit();
    },
    formSubmited() {
      console.log("validated");
      let sendData = {
        tenderDocument: this.form.tenderDocument,
        tenderDocumentDate: this.form.tenderDocumentDate,
        firstPartyInspect: this.form.firstPartyInspect,
        firstPartyInspectDate: this.form.firstPartyInspectDate,
        technicalTender: this.form.technicalTender,
        technicalTenderDate: this.form.technicalTenderDate,
        businessTender: this.form.businessTender,
        businessTenderDate: this.form.businessTenderDate,
        winBidCase: this.form.winBidCase,
        winBidDate: this.form.winBidDate,
        loseBidReason: this.form.loseBidReason,
        groupPurchaseProjectId: this.detail.id
      };

      this.updateFllowInfo(sendData)
        .then(res => {
          if (res.success) {
            if (this.form.winBidCase) {
              this.submitDisabled = true;
            }
            Toast.success("保存成功");
          } else {
            Toast.fail("保存失败");
          }
        })
        .catch(err => {
          console.log(err);
          Toast.fail("保存失败");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.project-purchase-fllow {
  margin: 12px 8px;
  .fieldAddMargin {
    margin-top: 14px;
  }
  .bottomBtnCol {
    flex: 1;
    padding: 8px;
  }
}
</style>